<template>

  <div id="app">
    <div class="container">
      <div class="title">
        <img class="title-img" src="../assets/logo/no-word-logo.png">
        <div class="title-font">红山开源证书查询</div>
      </div>


      <!--测试UUID：E29A018E9D46460FBDA73FB07ECDDE90-->
      <div class="card">

        <div class="card-num">证书编号：{{certificateNum}}</div>
        <div class="card-title" v-html="certificateName"></div>
        <img class="card-img" src="../assets/icon/zq-icon.svg">
      </div>


      <div class="zs">
        <img class="zs-img" :src="certificateImg">

      </div>
    </div>
  </div>

</template>

<script>
import "../assets/font/font.scss";
import PageUtils from "@/utils/pageUtils";


export default {
  name: "CertificateQuery",
  data(){
    return{
      certificateNum :'',
      certificateName : "",
      certificateImg: "http://192.168.1.198:8020/api/files/rjgb3k-7e1be11c3c888250849b64ba0e06e12.png"
    }
  },
  methods:{

    checkUid(){

      var UUID = this.$route.params.certificateUuid
      if (!UUID || UUID === null ) {
        // do something if UUID is empty or null
        //跳转
        PageUtils.openPage(this.$router,"/CertificateQueryNotFound")
      }else {
        var certificateInfo = {
          certificateUuid : UUID
        }
        this.$api.getCertificateInfoByUUID(certificateInfo).then((res)=>{

          if (res.status === 0) {
            this.certificateImg = "/api/" + res.data.certificateImg
            this.certificateNum = res.data.certificateNum
            this.certificateName = res.data.certificateName
          }else {
            //跳转
            PageUtils.openPage(this.$router,"/CertificateQueryNotFound")
          }
        })
      }

    }

  },
  mounted() {
    this.checkUid();
  }
}
</script>

<style scoped>
.zs-img{
  width: 368px;
  border-radius: 25px;
}


.zs{
  margin-top: 30px;

}



.card{
  position: relative;
  width: 368px;
  height: 206px;
  border-radius: 25px;
  opacity: 1;


  background: linear-gradient(62deg, #FE7D41 2%, #FFE253 95%);
  margin: 20px auto;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.2);
}

.card-num{
  position: absolute;
  left: 20px;
  top: 23px;

  height: 23px;
  opacity: 1;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0em;

  font-feature-settings: "kern" on;
  color: #FFFFFF;
}
.card-title{
  position: absolute;
  left: 80px;
  top: 75px;
  width: 199px;
  height: 74px;
  opacity: 1;
  font-family: Alibaba;
  max-width:368px;
  font-size: 24px;
  font-weight: 900;
  line-height: normal;
  text-align: center;
  letter-spacing: 0em;

  font-feature-settings: "kern" on;
  color: #FFFFFF;
}

.card-img{
  position: absolute;
  left: 287px;
  top: 134px;
  width: 72px;
  height: 72px;
  opacity: 1;
}

.container{
  background: linear-gradient(180deg, rgba(150, 160, 247, 0.3082) 0%, rgba(185, 192, 250, 0) 100%);
  height: 100vh;
  padding-left: 4vw;
  padding-right: 4vw;
  padding-top: 3vh;
}

.title{
  margin-left: 8px;
  width: 269px;
  height: 61px;
  display: flex;
  align-items: center;
}

.title-font{
  font-size: 24px;
  font-weight: 900;
  line-height: normal;
  margin: 0 auto;
  letter-spacing: 0em;
  font-feature-settings: "kern" on;
  color: #3D3D3D;

}
.title-img{
  width: 61px;

}


</style>
